<script setup>
import {
    ref, reactive,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
} from "vue";


import { Graph } from '@antv/x6';



// 端口配置
let ports = {
    groups: {
        top: { position: 'top', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } },
        right: { position: 'right', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } },
        bottom: { position: 'bottom', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } },
        left: { position: 'left', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } },
    },
    items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' },
    ],
};


// 注册自定义连线
Graph.registerEdge('device-connection', {
    inherit: 'edge',
    attrs: {
        line: {
            stroke: '#1890ff',
            strokeWidth: 2,
            targetMarker: {
                name: 'block',
                width: 12,
                height: 8,
            },
        },
    },
    zIndex: 0,
}, true);

// 注册自定义节点
Graph.registerNode('device-node', {
    inherit: 'rect',
    markup: [
        { tagName: 'rect', selector: 'body' },
        { tagName: 'image', selector: 'image' },
        { tagName: 'text', selector: 'text' },
        { tagName: 'text', selector: 'params' }
    ],
    attrs: {
        body: {
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#EFF4FF',
            rx: 6,
            ry: 6
        },
        // image: {
        //   'xlink:href': '', // 初始留空，动态设置
        //   width: 40,
        //   height: 40,
        //   x: 10,
        //   y: 10
        // },

        image: {
            'xlink:href': '',
            width: 40,
            height: 40,
            refX: '50%',  // 横向参考点为节点中心
            refY: '50%',  // 纵向参考点为节点中心
            x: -20,       // 向左偏移图片宽度的一半（40/2）
            y: -40        // 向上偏移图片高度的一半（40/2）
        },


        text: {
            text: '设备',
            fontSize: 13,
            fill: '#262626',
            // refX: 0.5,
            // refY: '100%',
            // y: -10,

            // refX: '50%',  // 横向参考点为节点中心
            // refY: '50%',  // 纵向参考点为节点中心
            // x: -20,       // 向左偏移图片宽度的一半（40/2）
            // y: -20,

            refY: '65%',

            textAnchor: 'middle',

            alignmentBaseline: 'middle',

            // textAnchor: 'middle'
        },
        params: {
            // text: '',
            fontSize: 12,
            // fill: '#666',
            // refX: 0.5,
            // refY: '100%',
            // y: 5,
            // textAnchor: 'middle',
            refX: '50%',  // 横向参考点为节点中心

            refY: '80%',
            textAnchor: 'middle',
            alignmentBaseline: 'middle',

            text: ''



        },


        deviceNo: '',
        data_res: []
        ,
    },
    ports: { ...ports },
}, true);



const container = ref(null);
const graph = ref(null);


//组件挂载到节点上之前执行的函数
onBeforeMount(() => { });

let ache_data = ref({

});

let timer = ref(null);


/*模式实时数据*/
let all_data = ref({

    de_27_20210004: {
        P: "11",
        U: 11,
        deviceNo: '20210004'
    },
    de_28_20210002: {
        P: "10",
        U: 6,
        Q:9,
        deviceNo: '20210002'
    }

})

//组件挂载完成后执行的函数<!--z-index:1-->
onMounted(() => {


    // 初始化画布
    graph.value = new Graph({
        panning: { enabled: true, modifiers: 'space', eventTypes: "leftMouseDown" },
        scaling: { min: 0.05, max: 1 },
        mousewheel: {
            enabled: true,
            modifiers: ['ctrl', 'meta'],
            guard: (e) => !e.altKey
        },
        grid: {
            size: 10,
            visible: true,
            args: { color: '#a0a0a0', thickness: 1 }
        },
        container: container.value,
        connecting: { anchor: 'orth' },
    });

    // 添加一个示例节点
    // const sampleNode = createDeviceNode(graph.value, { label: '示例设备', type: 'sample' }, { x: 100, y: 100 });
    // graph.value.addNode(sampleNode);

    console.log(window.localStorage.getItem("json_ex"));

    let datas = window.localStorage.getItem("json_ex")

    ache_data.value = JSON.parse(datas);

    console.log("缓存数据", ache_data)

    try {
        graph.value.fromJSON(ache_data.value);
    } catch (e) {
        console.log(e)
    }

    // timer.value = setInterval(() => {
    //     ache_data.value.cells.forEach((item, key) => {

    //         let deviceNo = item.data.deviceNo;

    //         console.log("deviceNo", deviceNo)
    //         console.log("deviceNo-item.data", item.data)

    //         if (deviceNo && deviceNo.length) {  //是设备
    //             let params = item.attrs.params;

    //             for (let items in all_data.value) {

    //                 if (items.indexOf(params.deviceNo) > -1) {
    //                     params.deviceTagcode.forEach((in_item, in_key) => {

    //                         console.log("in_item", in_item);

    //                         console.log("items", items)
    //                         in_item.defaultValue = all_data.value[items][in_item.tagcode]
    //                     })
    //                 }



    //             }


    //             let str = '';


    //             params.deviceTagcode.forEach((item, key) => {
    //                 str += item.label + ":" + item.defaultValue + item.unit + "\n"
    //             });


    //             params.text = str;

    //             try {
    //                 graph.value.fromJSON(ache_data.value);
    //             } catch (e) {
    //                 console.log(e)
    //             }



    //             let mock = {
    //                 "text": "电压:V",
    //                 "deviceNo": "20210004",
    //                 "deviceTagcode": [
    //                     {
    //                         "label": "电压",
    //                         "tagcode": "U",
    //                         "unit": "V",
    //                         "defaultValue": ""
    //                     }
    //                 ]
    //             }
    //         }


    //     })

    // }, 2000)


    // 修改定时器逻辑，改为精准更新
    // timer.value = setInterval(() => {
    //     graph.value.getNodes().forEach(node => {
    //         const deviceNo = node.getAttrs().params?.deviceNo; // 2.x 获取数据方式

    //         console.log("deviceNo",deviceNo);

    //         console.log('getAttrs',node.getAttrs())


    //         if (deviceNo) {
    //             const foundKey = Object.keys(all_data.value).find(key =>
    //                 key.includes(deviceNo)
    //             );

    //             console.log("foundKey",foundKey)

    //             if (foundKey) {
    //                 const deviceData = all_data.value[foundKey];
    //                 const params = node.getAttrs()?.params; // 2.x 获取属性方式

    //                 console.log("deviceData",deviceData)
    //                 console.log("params",params)

    //                 if (params?.deviceTagcode) {
    //                     let str = '';
    //                     params.deviceTagcode.forEach(item => {
    //                         str += `${item.label}:${deviceData[item.tagcode]}${item.unit}\n`;
    //                     });

    //                     console.log("str",str)

    //                     // 2.x 正确更新方式

    //                     console.log("node",node)

    //                     node.attr({
    //                         params: {
    //                             text: str
    //                         }
    //                     });



    //                     // 如果需要强制刷新视图
    //                     node.updateAttrs();
    //                 }
    //             }
    //         }
    //     });
    // }, 2000);

    timer.value = setInterval(() => {
        // 开启批量更新（2.x 等效于 freeze）
        graph.value.startBatch('update-nodes');

        graph.value.getNodes().forEach(node => {
            // 1. 获取数据（调试用）
            const nodeData = node.getAttrs() || {};
            console.log('[节点原始数据]', nodeData);

            // 2. 获取设备号
            const deviceNo = nodeData.params.deviceNo;
            if (!deviceNo) {
                console.warn('节点缺少 deviceNo 字段', node.id);
                return;
            }

            // 3. 匹配实时数据
            const matchedData = Object.values(all_data.value).find(
                data => data.deviceNo === deviceNo
            );

           
            if (!matchedData) {
                console.warn(`未找到 ${deviceNo} 的实时数据`);
                return;
            }
            console.log('[匹配的实时数据]', matchedData);

            // 4. 构建参数文本
            const params = nodeData.params || {};

            console.log("matchedData",matchedData);
            console.log("params",params)


            const str = (params.deviceTagcode || [])
                .map(item => `${item.label}:${matchedData[item.tagcode] || 'N/A'}${item.unit}`)
                .join('\n');
            console.log('[生成的文本]', str);

            // 5. 更新属性（关键步骤）
            node.attr({
                params: {  // 对应注册节点时的 selector
                    text: str, // 直接更新 text 内容
                    fill: '#f00' // 调试用：临时改为红色
                }
            });

            // 6. 强制刷新（2.x 需要）
            node.setData({ ...nodeData }, { silent: true });
        });

        // 结束批量更新（等效于 unfreeze）
        graph.value.stopBatch('update-nodes');
    }, 2000);

    // let eles = window.sessionStorage.getItem('svg_ele');

    // console.log("typeof eles", typeof eles)

    // eles = eles.replaceAll('-->', ' -->')
    // console.log(eles)

    // let domNode = htmlToDOM(eles);

    // console.log("domNode",domNode)

    // document.getElementById('svg_wrap').appendChild(domNode); 

});

function htmlToDOM(htmlString) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(htmlString, 'text/html');
    return doc.body.firstChild; // 或者 doc.body.children 来获取所有子节点
}






let de20210002 = ref({
    P: 1,
    Q: 2
});


let de20210004 = ref({

});

//组件更新之前执行的函数
onBeforeUpdate(() => { })

//组件更新完成之后执行的函数
onUpdated(() => { })

//组件卸载之前执行的函数
onBeforeUnmount(() => { })

//组件卸载完成后执行的函数
onUnmounted(() => { })

</script>

<template>
    <div class="" style="width:100%;background-color: #ddd;height:100%">

        <div ref="container" style="height:100%" id="container" class="my_container" @dragover="handleDragOver"
            @drop="handleDrop"></div>


        <!-- <div id="svg_wrap" style="width:100%;height:800px">

        </div> -->
    </div>
</template>

<style lang="less" scoped></style>
